import React from 'react'
import View from 'lib/View.jsx'
import Layout from '../common/layout.jsx'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import Topbar from 'lib/components/TopbarWidget.jsx'
import MainScope from './MainScope.es6'
import dispatcher from 'lib/dispatcher'
import {Success,Info,Warning} from 'lib/components/Notify.jsx'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
import tips from '../common/indicator-tips.jsx'
export default class MainView extends View{
  componentDidMount(){
    super.componentDidMount()
    if(BlueWare.isSaas){
      $.ajax({
        url:BlueWare.urlPrefix+'/app/'+BlueWare.appId+'/agentversion/latestReleaseAgentVersion.json'
      }).done(function(data){
        if(data.result){
          Info(function(notice){
            return (
              <div>
                <p>
                  {data.type}探针最新版本为：{data.latestVersion}，您当前已使用的最新版本为：{data.currentVersion}
                  <a href={BlueWare.isIOS?'https://oneapm.kf5.com/posts/view/43700/':'https://oneapm.kf5.com/posts/view/43702/'} target="_blank" style={{marginLeft:10}}>点击查看详情</a>
                </p>
                <p style={{textAlign:'right'}}>
                  <a href="javascript:;" onClick={function(){
                    dispatcher.dispatch({
                      $type:'dismiss_version_notice',
                      versionNotice:data
                    })
                    notice.close()
                  }}>不再提醒</a>
                </p>
              </div>
            )
          },{
            autoClose:false
          })
        }
      })
    }
  }
  render(){
    return (
      <Layout title="总览" subtitle="总览应用健康情况">
        <div className="pure-g">
          <div className="pure-u-1 pure-u-xl-7-12">
            <div className="box">
              <Card title={
                  <span>
                    执行时间
                    <i className="iconfont" data-tip={tips.overview_exec}>&#xe663;</i>
                  </span>
                } extra={
                  addWidgetMixin(this.scope.chart_overviewApi,'执行时间',{
                    chartType:'area'
                  })
                }>
                <ChartWidget
                  store={this.state.chart_overview}
                  height={375}
                  chartType="area"
                />
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-xl-5-12">
            <div className="box">
              <Card title={
                  <span>
                    崩溃数
                    <i className="iconfont" data-tip={tips.overview_crash_count}>&#xe663;</i>
                  </span>
                } extra={
                  addWidgetMixin(this.scope.chart_crashApi,'崩溃数')
                }>
                <ChartWidget
                  store={this.state.chart_crash}
                  height={140}
                />
              </Card>
            </div>
            <div className="box">
              <Card title={
                  <span>
                    HTTP 响应时间
                    <i className="iconfont" data-tip={tips.overview_http_resp}>&#xe663;</i>
                  </span>
                } extra={
                  addWidgetMixin(this.scope.chart_httpApi,'HTTP 响应时间',{
                    chartType:'area'
                  })
                }>
                <ChartWidget
                  store={this.state.chart_http}
                  height={140}
                  chartType="area"
                />
              </Card>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1 pure-u-xl-7-24">
            <div className="box">
              <Card title={
                  <span>
                    最慢交互
                    <i className="iconfont" data-tip={tips.overview_interaction}>&#xe663;</i>
                  </span>
                }>
                <Topbar
                  store={this.state.bar_interaction}
                  urlRoot={BlueWare.pageUrlPrefix+'/app/'+BlueWare.appId+'/interaction'}
                />
              </Card>
            </div>

          </div>
          <div className="pure-u-1 pure-u-xl-7-24">
            <div className="box">
              <Card title={
                  <span>
                    会话数 - 应用版本
                    <i className="iconfont" data-tip={tips.overview_session_appversion}>&#xe663;</i>
                  </span>
                } extra={
                  addWidgetMixin(this.scope.chart_sessionApi,'会话数 - 应用版本')
                }>
                <ChartWidget
                  store={this.state.chart_session}
                />
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-xl-10-24">
            <div className="box">
              <Card title={
                  <span>
                    HTTP 错误率 &amp; 网络故障率
                    <i className="iconfont" data-tip={tips.overview_http_error}>&#xe663;</i>
                  </span>
                } extra={
                  addWidgetMixin(this.scope.chart_errorApi,'HTTP 错误率 & 网络故障率')
                }>
                <ChartWidget
                  store={this.state.chart_error}
                />
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    )
  }
}
MainView.defaultProps = {
  Scope:MainScope
}
